<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="resources/time/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="resources/time/css/font-awesome.min.css">
<link rel="stylesheet" href="resources/time/css/daterangepicker.css">

<!--echarts-->
<script src="resources/js/echarts.min.js"></script>
<style type="text/css">
.pie1{
	float:left;
}
.pie2{
	float:left;
}
.pie3{
	float:left;
}
.bar{
}
.modal-body{
	margin-left: 50px;
}
</style>
</head>
<body>
       
   <div class="modal-body">
      <div class="form-group">
		<label class="col-sm-3 control-label"></label>
		<div class="col-sm-9">
			  <div class="input-group">
				<button type="button" class="btn btn-default pull-right" id="daterange-btn">
					<span>
					  <i class="fa fa-calendar"></i> 日期选择
					</span>
					<i class="fa fa-caret-down"></i>
				 </button>
			 </div>
		</div>
	 </div>
      <div class="pie1" id="pie1" style="width: 420px;height: 350px;"></div>
      <div class="pie2" id="pie2" style="width: 420px;height: 350px;"></div>
      <div class="pie3" id="pie3" style="width: 420px;height: 350px;"></div>
      <div style="clear:both"></div> 
      <div class="bar" id="bar" style="width: 1110px;height: 490px;"></div>
    </div>
        
<script type="text/javascript" src="resources/time/js/jquery.min.js"></script>
<script type="text/javascript" src="resources/time/js/moment.js"></script>
<script type="text/javascript" src="resources/time/js/daterangepicker.js"></script>
<script type="text/javascript">
	$('#daterange-btn').daterangepicker({
			ranges: {
				'今天': [moment(), moment()],
				'本周': [moment().startOf('week'), moment().endOf('week')],
				'本月': [moment().startOf('month'), moment().endOf('month')],
				'今年': [moment().startOf('year'), moment().endOf('year')]
			},
			startDate: moment(),
			endDate: moment().endOf('month')
		},
		function(start, end) {
			$('#daterange-btn span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
			var BaseUrl = 'http://localhost:8080/IntelligentSystem';
			 $.ajax({
		         type : "post",
		         async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
		         url: BaseUrl + '/echarts',
		         data : { startTime : start.format('YYYY-MM-DD'), endTime : end.format('YYYY-MM-DD')},
		         dataType : "json",        //返回数据形式为json
		         success : function(result) {
		             //请求成功时执行该函数内容，result即为服务器返回的json对象
		             if (result) {
		            	 tool(result);  
		             }
		          
		        },
		         error : function(errorMsg) {
		             //请求失败时执行该函数
		         alert("图表请求数据失败!");
		         myChart.hideLoading();
		         }
		    })
		}
	);

	//Date picker
	$('#datepicker').datepicker({
		autoclose: true
	});
</script>
        
<!--pie图-->
<script>
    // 基于准备好的dom，初始化echarts实例
    var BaseUrl = 'http://localhost:8080/IntelligentSystem';
    var mypie = echarts.init(document.getElementById('pie1'));
    pieoption = {
        title : {
            text: '付款',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient : 'vertical',
            x : 'left',
            data:[ /* '药', '饲料', '设备', '猪种', '员工工资', '水电费用','其他' */]
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {
                    show: true,
                    type: ['pie', 'funnel'],
                    option: {
                        funnel: {
                            x: '25%',
                            width: '50%',
                            funnelAlign: 'left',
                            max: 1548
                        }
                    }
                },
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        series : [
            {
                name:'访问来源',
                type:'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                 /*    {value:335, name:'药'},
                    {value:234, name:'饲料'},
                    {value:135, name:'设备'},
                    {value:1548, name:'猪种'},
                    {value:135, name:'员工工资'},
                    {value:1548, name:'水电费用'},
                    {value:348, name:'其他'}, */

                ]
            }
        ]
    };
    // 基于准备好的dom，初始化echarts实例
    var mypie1 = echarts.init(document.getElementById('pie2'));
    pieoption1 = {
        title : {
            text: '收款',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient : 'vertical',
            x : 'left',
            data:[ '出售猪', '淘汰设备', '入股资金', '其他']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {
                    show: true,
                    type: ['pie', 'funnel'],
                    option: {
                        funnel: {
                            x: '25%',
                            width: '50%',
                            funnelAlign: 'left',
                            max: 1548
                        }
                    }
                },
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        series : [
            {
                name:'收款',
                type:'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                   /*  {value:335, name:'出售猪'},
                    {value:310, name:'淘汰设备'},
                    {value:234, name:'入股资金'},
                    {value:135, name:'其他'}, */

                ]
            }
        ]
    };
    // 基于准备好的dom，初始化echarts实例
    var mypie2 = echarts.init(document.getElementById('pie3'));
    pieoption2 = {
        title : {
            text: '结算',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient : 'vertical',
            x : 'left',
            data:[ /* '利润', '付款', '收款' */]
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {
                    show: true,
                    type: ['pie', 'funnel'],
                    option: {
                        funnel: {
                            x: '25%',
                            width: '50%',
                            funnelAlign: 'left',
                            max: 1548
                        }
                    }
                },
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        series : [
            {
                name:'结算',
                type:'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    /* {value:335, name:'利润'},
                    {value:310, name:'收款'},
                    {value:234, name:'付款'}, */

                ]
            }
        ]
    };
    var mybar = echarts.init(document.getElementById('bar'));
    baroption = {
        title : {
            text: '一年支出的情况'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:[/* '利润','收款','付款' */]
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                data : [/* '1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月' */]
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'利润',
                type:'bar',
                data:[/* 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3 */]
               /*  markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                }  */
            },
            {
                name:'收款',
                type:'bar',
                data:[/* 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3 */]
                /*  markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                }   */
            },
            {
                name:'付款',
                type:'bar',
                data:[/* 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3 */]
                /* markPoint : {
                    data : [
                        {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
                        {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name : '平均值'}
                    ]
                } */ 
            }
        ]
    };

	$.ajax({
		type:"post",
		async:true,
		url: BaseUrl + '/echarts',
	    data: {},
	   	dataType: "json",
	   	
	   	success:function(result){
	   		tool(result);
	   	},
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert("查询失败");
        }
	});
    mypie.setOption(pieoption);
    mypie1.setOption(pieoption1);
    mypie2.setOption(pieoption2);
    mybar.setOption(baroption);
    function tool(result) {
    	var payLegends = [];
		var paySeries = [];
   	    var payJson = result[0].payCategorys;
        for(var i=0;i<payJson.length;i++){ 
       	   var it = new Object;//通过new一个Object,可以相当于创建一个数据传输的类
		   payLegends.push(payJson[i].name);
		   it.value = payJson[i].money;
		   it.name = payJson[i].name;
		   paySeries.push(it);
         }
        mypie.setOption({ //加载数据图表
           legend: {
                 data: payLegends
           },
           series: {
                 // 根据名字对应到相应的系列
                 name: ['付款'],
                 data:paySeries
           }    
       });
        var getLegends = [];
		var getSeries = [];
   	    var getJson = result[0].getCategorys;
        for(var i=0;i<getJson.length;i++){ 
       	   var it = new Object;//通过new一个Object,可以相当于创建一个数据传输的类
		   getLegends.push(getJson[i].name);
		   it.value = getJson[i].money;
		   it.name = getJson[i].name;
		   getSeries.push(it);
         }
        mypie1.setOption({ //加载数据图表
           legend: {
                 data: getLegends
           },
           series: {
                 // 根据名字对应到相应的系列
                 name: ['收款'],
                 data:getSeries
           }    
       });
        var sumLegends = [];
		var sumSeries = [];
   	    var sumJson = result[0].sumCategorys;
        for(var i=0;i<sumJson.length;i++){ 
       	   var it = new Object;//通过new一个Object,可以相当于创建一个数据传输的类
		   sumLegends.push(sumJson[i].name);
		   it.value = sumJson[i].money;
		   it.name = sumJson[i].name;
		   sumSeries.push(it);
         }
        mypie2.setOption({ //加载数据图表
           legend: {
                 data: sumLegends
           },
           series: {
                 // 根据名字对应到相应的系列
                 name: ['结算'],
                 data: sumSeries
           }    
       });
        var legends = [];
		var Series = [];
		var json = result[0].categorys.data;
		for(var i=0;i < json.length;i++){
			var it = new Object();
			legends.push(json[i].name);
			it.data = json[i].data;
			Series.push(it);		
		}
		var data1 = Series[0].data;
		var data2 = Series[1].data;
		var data3 = Series[2].data;
		var xdata = result[0].categorys.xcontent;
		 mybar.setOption({        //加载数据图表
             xAxis: {
                 data: xdata
             },
             legend: {
                 data: legends
             },
             series: [
            	{
                 // 根据名字对应到相应的系列
                	 data: data1,
                	 markPoint : {
                         data : [
                             {type : 'max', name: '最大值'},
                             {type : 'min', name: '最小值'}
                         ]
                     },
                     markLine : {
                         data : [
                             {type : 'average', name: '平均值'}
                         ]
                     }
             	},{
             		 data: data2,
             		markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name: '平均值'}
                        ]
                    }
             	},{
             		 data: data3,
             		markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name: '平均值'}
                        ]
                    }
             	}
		     ]  
         });
    }
</script>
</body>
</html>